<template>
	<view v-if="list && list.length > 0" class="cu-card case bg-white">
		<view @click="handleItem(item)" v-for="(item, index) in props.list" :key="index" class="cu-item shadow">
			<view class="image">
				<image :src="item.imgUrls" mode="scaleToFill"></image>
				<view v-if="item.top" class="cu-tag bg-blue">最新</view>
				<view class="cu-bar bg-shadeBottom">
					<text class="text-size-32 wenyue-font">{{ item.name }}</text>
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="'background-image:url(' + item.communityLogo + ');'"></view>
					<view class="content flex-sub">
						<view class="text-grey text-bold">{{ item.title }}</view>
						<view class="text-gray text-sm flex justify-between">
							{{ item.startTime }}
							<view class="text-gray text-sm">
								<text class="cuIcon-attentionfill margin-lr-xs"></text>
								0
								<text class="cuIcon-appreciatefill margin-lr-xs"></text>
								0
								<text class="cuIcon-messagefill margin-lr-xs"></text>
								0
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/stores/index';
const setting = useSettingStore();
const emit = defineEmits(['action']);
const props = defineProps({
	isCard: {
		type: [Boolean, String],
		default: false
	},
	list: {
		default: () => {
			return {
				avatarUrl: '',
				communityId: 0,
				communityName: '',
				content: '',
				coverUrl: '',
				createTime: '',
				endTime: '',
				enrollEndTime: '',
				enrollStartTime: '',
				id: 0,
				name: '',
				publish: true,
				publishTime: '',
				realName: '',
				startTime: '',
				top: true
			};
		}
	}
});
const handleItem = (e: any) => {
	emit('action', e);
};
</script>

<style lang="scss" scoped>
.cu-card.case .image image {
	width: 100%;
	height: 300rpx;
}
.cu-card > .cu-item {
	box-shadow: 0px 2px 4px 0px rgba(200, 200, 200, 0.5), 0px 2px 4px 0px rgba(200, 200, 200, 0.5);
	border-radius: 8px;
}
</style>
